Day 11來到這份Tutorial的Section3 - 控制敘述，包含條件判斷（if-else、switch）與迴圈（for、while）等等。

雖然這是TypeScript菜鳥系列，但因為控制敘述跟JavaScript幾乎是一樣的，所以今明兩天不會特別細講，只會挑重點複習一下～

if, if-else, if-else...if-else

在條件判斷第一個會先學的通常都是 if 敘述，一般而言 if 敘述可以有三種情況：

// case 1.
if(condition is true){
	...
}

// case 2.
if(condition is true){
	...
} else {
 // excute this block if condition is false
	...
}

// case 3.
if(condition1 is true){

} else if(condition2 is true){
 // excute this block if condition1 is false
 	...
} else{
 // excute this block if both condition1 and 2 are false
 	... 
}

從 case 1 能看出，常說的 if-else 判斷其實可以只有 if 判斷式，而沒有 else 區塊(block)的狀況，如果 if 判斷為 false 就會跳出判斷區塊直接執行接下來的程式敘述。

case 2 就是很常看到的 if-else 判斷式，當 if 條件判斷為 true 就只會執行 if 底下的區塊；相反地，當 if 條件判斷為 false，反而會跳過 if 底下的區塊，直接執行 else 底下的區塊。case 2 不是執行完 if 底下的區塊，就是執行完 else 底下的區塊，才會繼續執行 if-else 之後的程式碼。

case 3 是需要更多條件判斷的狀況，例如去一些觀光景點買門票的時候，可能會遇到根據遊客個人的條件來決定要買「全票」、「優待票」、「身障票」、「軍警票」等等，這種時候就可以 if-else...if-else 的判斷式，以下用虛擬碼(pseudo code)描述買門票的狀況就是：

if (遊客是身障朋友){
    遊客買身障票
} else if (遊客是軍警){
    遊客買軍警票
} else if (遊客有優待資格 && 遊客非身障朋友 && 遊客非軍警){
    遊客買優待票
} else {
    遊客買全票
}

不過事實上，JavaScript本身沒有 if-else...if-else 這種判斷式， if-else...if-else 只是 if-else 再合併另一個 if-else 的變形。

可以稍微回想一下 if 或 else 如果只是執行一行程式碼，其實是能省略 {}，所以 if-else...if-else 就相當於：

if(condition1 is true){
	...
} else
     if(condition2 is true){
         ...
     } else {
         ... 
     }

ternary operator 三元運算子

如果只是簡單的 if-else 判斷，可以用三元運算子 ?: 表達成更簡短的寫法：

(1 === 2) ? true : false;

如果希望可以儲存三元運算子的結果，可以表達成：

let result = (1 === 2) ? true : false;

能夠這樣儲存結果是因為在JavaScript中 = 和 ?: 的優先次序(precedence)是相同的，並且和數學運算不同的是，= 和 ?: 是由右向左運算，所以這裡會先計算出 ?: 的結果，再賦值給 result 變數

有關運算子(operator)優先次序和方向可以參考MDN這篇章節的表格。

switch

Day 9 在講Enum型別的時候，其實就有用過 switch 判斷式：

const progress = {
    notStarted: 0,
    inProgress: 1,
    isCompleted: 2,
};

let develop_tasks = {
    feature1: progress.isCompleted,
    feature2: progress.inProgress,
    feature3: progress.notStarted,
    feature4: progress.isCompleted,
}

function checkTaskProgress(feature){
    switch(develop_task['feature']){
        case progress['notStarted']:
            return 'not started';
        case progress['inProgress']:
            return 'in progress';
        case progress['isCompleted']:     
            return 'is completed';
    };
    return new Error('undefined value');
}

而 switch 判斷式可以粗略寫成以下這樣：

switch(expression){
	case 1:
	    ...
	    break;
	case 2:
	    ...
	    break;
	case 3:
	    ...
	    break;
	...
	case N:
	    ...
	    break;
	default:
	    ...		
}

expression 運算出來的可以是 string 或是 number 型別的結果，然後會由上往下逐一去比對結果符合哪種case，若是沒有符合任一種case就會執行default的程式。

這裡要注意的是：

1. break 是讓case執行完程式碼之後跳出整個switch判斷式，若case沒有 break 就會繼續執行以下的case，直到遇到 break 或是結束整個switch判斷式為止；
2. default是可有可無的，所以若是沒有符合任一種case，也沒有default的話，就會結束switch判斷式。

truthy value and falsy value

很常會看到有人寫出以下這樣的程式碼：

const result = 5 - 4 + 1 - 2;	// 0

if(!result){
	console.log(`The result is ${result}`.)
} else	{
	console.log(`The result is not 0`.)
}

為何沒有任何的判斷運算子 ===、>=、< 等，if 判斷式就能判斷是 true 或 false？

原因在於JavaScript有將"值"的性質分類為 truthy value 和falsy value，如果屬於truthy value就會判斷為true；反之如果值屬於falsy value，就會判斷為flase。

而JavaScript目前只有8種falsy value，除此之外都是truthy value，所以只要記住8種falsy value就能判斷是true或false，而這8種falsy value分別就是：

• 0
• -0
• 0n (bigint type)
• 空字串(empty string)：""、''、`` (反引號空字串)
• null
• undefined
• NaN
• document.all

有關falsy value的詳細介紹可以參考這篇MDN文章

參考資料
TypeScript Turtorial
Operator precedence @MDN
Falsy @MDN